{% extends "jarvis/base.html" %}

{% block content %}
<script>
  function removeGroup(group_name)
  {
  $.ajax({
        url: '/jarvis/groups/'+group_name+'/remove',
    });
  }
</script>

{% if group_list %}
<ul data-role="listview">
  {% for group in group_list %}
  
  <li area="{{area_name}}">
    <a href="/jarvis/groups/{{group.0.group_name}}">{{group.0.group_name}}</a><span class="ui-li-count">{{group.1}}</span>
    </a>
    <a class="remove" href="/jarvis/groups/{{group.0.group_name}}/remove" data-mini="true" data-icon="delete"onclick="delete_item()"></a>

</li>

{% empty %}
  <li>No groups have been established yet</li>
{% endfor %}
</ul>
{% endif %}
<script>
$("a.remove").bind("click", function(event, ui){
    parent = $(this).parents("li");
    group = parent.attr("group");
    removeGroup(group);
    parent.remove();
});
</script>
{% endblock%}
